<script setup>
import axios from "@/utils/axios.js"
import { ref, reactive, onMounted } from "vue";
import { Search } from '@element-plus/icons-vue'

const data = reactive({
  userInfo: null,
  page: 1,
  pageSize: 5,
  total: 0,
  searchKeyword: "",
  loading: false
})

onMounted(() => {
  init()
})

const init = () => {
  data.loading = true;
  axios.get(`api/users/getAllUsers/${data.page}/${data.pageSize}`, {
    params: { keyword: data.searchKeyword }
  })
      .then(res => {
        data.userInfo = res.data.records
        data.total = res.data.total || 0
      })
      .finally(() => {
        data.loading = false
      })
}

const del = (val) => {
  axios.get(`api/users/deleteUser/${val}`)
      .then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "操作成功~",
            type: "success",
            duration: 1500,
            onClose: () => {
              init()
            }
          })
        }
      })
}

const jump = (val) => {
  data.page = val
  init()
}

const handleSearch = () => {
  data.page = 1
  data.limit = 5
  const jsonData = JSON.stringify({
    page: data.page,
    limit: data.limit,
    key: data.searchKeyword
  });
  axios.post(`api/users/searchUser`, jsonData)
  .then(res => {
    if (res.code === 200) {
      data.userInfo = res.data.records
    }
  })
  init()
}
</script>

<template>
  <div class="user-management">
    <!-- 标题和搜索区域 -->
    <div class="header">
      <h1>用户管理</h1>
      <div class="search-box">
        <el-input
            v-model="data.searchKeyword"
            placeholder="搜索用户名或邮箱"
            clearable
            @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>
    </div>

    <!-- 用户数据表格 -->
    <div class="table-wrapper">
      <el-table
          :data="data.userInfo"
          stripe
          v-loading="data.loading"
          element-loading-text="加载中..."
      >
        <el-table-column prop="username" label="用户姓名" />
        <el-table-column prop="phone" label="电话号码" />
        <el-table-column prop="gender" label="性别" >
          <template #default="scope">
            <span class="gender-tag" :class="scope.row.gender">
              {{ scope.row.gender }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"  />
        <el-table-column prop="email" label="邮箱"  />
        <el-table-column prop="points" label="积分"/>
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button
                type="danger"
                size="small"
                @click="del(scope.row.userId)"
            >
              强制退出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
          background
          :total="data.total"
          :current-page="data.page"
          :page-size="data.pageSize"
          @current-change="jump"
          layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<style scoped>
.user-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

h1 {
  color: #303133;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.search-box {
  width: 300px;
}

.table-wrapper {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.gender-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.gender-tag.男 {
  background: #e6f7ff;
  color: #1890ff;
}

.gender-tag.女 {
  background: #fff0f6;
  color: #eb2f96;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 调整Element Plus组件样式 */
:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #fafafa;
}

:deep(.el-input-group__append) {
  background-color: #409eff;
  color: white;
  border: none;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff;
}
</style>